<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-calendar"></i> 班级基本信管理
        </el-breadcrumb-item>
        <el-breadcrumb-item>班级编辑</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="form-box">
        <el-form
          ref="formRef"
          :rules="rules"
          :model="form.data"
          label-width="80px"
        >
          <el-form-item label="班级名称" prop="className">
            <el-input
              v-model="form.data.className"
              placeholder="命名格式：专业+年级-序号(软件-18-1)"
            >
            </el-input>
            <span style="color: red"
              >*命名格式：专业+年级-序号(软件-18-1)*</span
            >
          </el-form-item>

          <!-- <el-form-item label="班级人数" prop="studentNumber">
            <el-input v-model="form.data.studentNumber"></el-input>
          </el-form-item> -->
          <!--          <el-form-item label="班级代码" prop="classCode">-->
          <!--            <el-input v-model="form.data.classCode"></el-input>-->
          <!--          </el-form-item>-->
          <!--          <el-form-item label="辅导员" prop="adviser">-->
          <!--            <el-input-->
          <!--              v-model="form.data.adviser"-->
          <!--              @focus="getAdviser()"-->
          <!--            ></el-input>-->
          <!-- <el-select
            v-model="instructorIndex"
            placeholder="请选择辅导员"
            @change="setInstructor"
          >
            <el-option
              v-for="(item, index) in instructorList"
              :key="item.sid"
              :label="item.userName"
              :value="index"
            >
            </el-option>
          </el-select> -->
          <!--          </el-form-item>-->
          <!--          <el-form-item label="开设日期" prop="estabDate">-->
          <!--            <el-date-picker-->
          <!--              v-model="form.data.estabDate"-->
          <!--              type="date"-->
          <!--              placeholder="选择一个日期"-->
          <!--              format="YYYY-MM-DD"-->
          <!--              value-format="YYYY-MM-DD"-->
          <!--            ></el-date-picker>-->
          <!--          </el-form-item>-->
          <!-- <el-form-item label="学习年数" prop="yearNumber">
            <el-input v-model="form.data.yearNumber"></el-input>
          </el-form-item> -->
          <el-form-item label="所属学院" prop="collegeName">
            <el-select
              v-model="form.data.collegeId"
              placeholder="请选择学院"
              @change="getMajorList"
            >
              <el-option
                  v-for="item in collegeList"
                  :key="item.sid"
                  :label="item.collegeName"
                  :value="item.sid"
                  :disabled="item.collegeName!=='全学院'? false:true"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所属专业" prop="majorName">
            <el-select v-model="form.data.majorId" placeholder="请选择专业">
              <el-option
                v-for="item in majorList"
                :key="item.sid"
                :label="item.majorName"
                :value="item.sid"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">提交</el-button>
            <el-button @click="onReset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- 选择房间 -->
    <el-dialog
      title="选择辅导员"
      v-model="dialogVisible"
      width="25.5%"
      :before-close="handleClose"
    >
      <el-table :data="adviserData" border style="width: 100%">
        <!-- <el-table-column prop="id" label="" width="120">
				</el-table-column> -->
        <el-table-column prop="userName" label="用户" />
        <el-table-column prop="loginName" label="账号" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button @click="checkAdviser(scope.row)" >选择</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import {reactive, ref} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import request from "../../utils/request";
import {useRoute, useRouter} from "vue-router";
import {useStore} from "vuex";
import element from "../../plugins/element";

export default {
  name: "AddClass",
  setup() {
    const root = "/class/";
    const router = useRouter();
    const route = useRoute();
    const store = useStore();

    const instructorList = ref([]);
    request.get("/user/instructor").then((res) => {
      instructorList.value = res.data;
    });

    const collegeList = ref([]);
    request.get("/college").then((res) => {
      collegeList.value = res.data;
    });

    const majorList = ref([]);
    const getMajorList = (val) => {
      console.log(val);
      form.data.majorId = "";
      request.get("/major/byCollegeId?collegeId=" + val).then((res) => {
        majorList.value = res.data;
      });
    };

    const instructorIndex = ref(0);

    const setInstructor = (val) => {
      form.data.adviser = instructorList.value[val].userName;
      form.data.adviserId = instructorList.value[val].sid;
    };

    const rules = {
      className: [{ required: true, message: "请输入班级名", trigger: "blur" }],
    };
    const formRef = ref(null);
    var form = reactive({
      data: {
        sid: "",
        className: "",
        studentNumber: "",
        collegeId: "",
        majorId: "",
        adviser: "",
        adviserId: "",
        // estabDate: "",
        yearNumber: "",
      },
    });
    if (route.query.id) {
      request.get(root + route.query.id).then((res) => {
        getMajorList(res.data.collegeId);
        form.data = res.data;
      });
    }
    // 提交
    const onSubmit = () => {
      // 表单校验
      formRef.value.validate((valid) => {
        if (valid) {
          var method = form.data.sid === "" ? "POST" : "PUT";
          request({
            url: root,
            method: method,
            data: form.data,
          }).then((res) => {
            if (res.code == "18") {
              ElMessage.error(res.msg);
            } else {
              ElMessage.success("成功");
            }
            // 关闭当前页面的标签页;
            store.commit("closeCurrentTag", {
              $router: router,
              $route: route,
            });
            router.push("/admin/class");
          });
        } else {
          return false;
        }
      });
    };
    // 重置
    const onReset = () => {
      formRef.value.resetFields();
    };
    const dialogVisible = ref(false);
    const handleClose = (done) => {
      ElMessageBox.confirm("确定放弃选择或者关闭吗?")
        .then(() => {
          done();
        })
        .catch(() => {
          // catch error
        });
    };
    const adviserData = ref([]);
    const getAdviser = () => {
      dialogVisible.value = true;
      request.get("/user/queryUser").then((res) => {
        adviserData.value = res.data;
      });
    };
    const checkAdviser = (row) => {  
      console.log(row);
      form.data.adviser = row.userName;
      form.data.adviserId = row.sid;
      if (  form.data.adviserId!=null) {
         dialogVisible.value = false;
      }
    };

    return {
      instructorIndex,
      instructorList,
      collegeList,
      majorList,
      rules,
      formRef,
      form,
      getMajorList,
      setInstructor,
      onSubmit,
      onReset,
      handleClose,
      dialogVisible,
      getAdviser,
      checkAdviser,
      adviserData,
    };
  },
};
</script>